<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
    <link rel="stylesheet" href="./common.css">
</head>

<body>
    <div class="page">
        <div class="page__hd">
            <h1 class="page__title">Uploader</h1>
            <p class="page__desc">
                上传组件，一般组合
                <a href="" class="link">组件Gallery</a> 来使用
            </p>
        </div>
        <div class="page_bd">
            <div class="weui-cells weui-cells_form">
                <div class="weui-cell weui-cells__uploader">
                    <div class="weui-cell__bd">
                        <div class="weui_uploader">
                            <div class="weui-uoloader__hd">
                                <p class="weui-uploader__title">图片上传</p>
                                <div class="weui-uploader__info">0/9</div>
                            </div>
                            <div class="weui-uploader__bd">
                                <ul class="weui-uploader__files">
                                    <li class="weui-uploader__file"></li>
                                    <li class="weui-uploader__file"></li>
                                    <li class="weui-uploader__file"></li>
                                    <li class="weui-uploader__file weui-ubloader__file_status">

                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        const oPage = document.querySelector('.page');

        setTimeout(() => {
            oPage.classList.add('show')
        }, 200);
        oPage.addEventListener('transitionend', () => {
            console.log('过渡效果完成');
        })
    </script>
</body>

</html>